<template>
    <!-- 自定义表单组件 -->
    <div class="cestom-form" :class="isFull ? 'full' : ''">
        <div class="items-contener">
            <div class="logo-contener">
                自定义表单
            </div>
            <div class="main-contener">
                <designer />
            </div>
        </div>
        <div class="views-contener">
            <pane @FullScene="handelFullScene" :designFormSubmit="formSubmit" />
        </div>
        <div class="configs-contener">
            <config />
        </div>
    </div>
</template>
<script>
import designer from './designer/index'
import pane from './pane/index.vue'
import config from './config/index'
export default {
    components: {
        designer,
        pane,
        config
    },
    data() {
        return {
            isFull: false,
            formSubmit: {}
        }
    },
    created() {
        this.handelAcceptDesignForm()
    },
    methods: {
        /**
         * 接收要设计的表单参数
         */
        handelAcceptDesignForm() {
            if (this.$route.params.value) {
                this.formSubmit = this.$route.params.value
            } else {
                return
            }
        },
        /**
         * 组件全屏
         */
        handelFullScene(params) {
            console.log('params', params)
            this.isFull = params
        }
    }
}
</script>
<style lang="scss" scoped>
.cestom-form {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: flex-start,
        $align: center
    );
    @include background_color($color: 'cover');
    @include border_color();

    transition: all 0.1s;
    .items-contener {
        @include box_flex(
            $width: 15%,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );

        min-width: 300px;
        .logo-contener {
            @include box_flex(
                $width: 100%,
                $height: 42px,
                $direction: column,
                $justify: center,
                $align: flex-start
            );
            @include border_color_only(
                $direction: bottom,
                $type: solid,
                $width: 1px,
                $color: 'border-base'
            );

            padding: 0 10px;
            font-size: $font-lg;
            font-weight: bolder;
            letter-spacing: 3px;
            @include font_color($color: 'primary');
        }
        .main-contener {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: column,
                $justify: flex-start,
                $align: flex-start,
                $flex-1: 1
            );
        }
    }
    .views-contener {
        @include box_flex(
            $width: auto,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start,
            $flex-1: 1
        );
        @include border_color_only(
            $direction: left,
            $type: solid,
            $width: 1px,
            $color: 'border-base'
        );
        @include border_color_only(
            $direction: right,
            $type: solid,
            $width: 1px,
            $color: 'border-base'
        );
        .main-contener {
            @include box_flex(
                $width: 100%,
                $height: 100%,
                $direction: column,
                $justify: flex-start,
                $align: flex-start,
                $flex-1: 1
            );
        }
    }
    .configs-contener {
        @include box_flex(
            $width: 15%,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );

        min-width: 300px;
    }
}
.cestom-form.full {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: flex-start,
        $align: center
    );
}
</style>
